<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html >
<html 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html" 
    xmlns:p="http://primefaces.org/ui"
    xmlns:ezcomp="http://xmlns.jcp.org/jsf/composite/ezcomp">
    <h:head>
        <h:outputStylesheet library="css" name = "basicViewStructure.css" />
        <h:outputStylesheet library="css" name = "indexViewStructure.css" />
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        SmartCAL
        <h:form  
            id = "signInForm" 
            prependId="false" >
            <div class = "genericTableRow" >
                <p:outputLabel
                    for = "usernameField" 
                    id="usernameLabel" 
                    rendered = "true"
                    value = "Username ( e-mail ) :" />
                <p:inputText 
                    autocomplete="on" 
                    disabled="false"
                    id = "usernameField"
                    label = "Username"
                    maxlength="20" 
                    placeholder = "username"
                    readonly="false" 
                    rendered = "true"
                    required = "true"
                    requiredMessage = "Username Required !"
                    value="#{signInBean.userSigningIn.mail}" />
            </div>
            <div class = "genericTableRow">
                <p:outputLabel
                    for = "passwordField"
                    id = "passwordLabel" 
                    rendered = "true"
                    value = "Password :" /> 
                <p:inputText 
                    autocomplete = "off"
                    disabled = "false"
                    id = "passwordField"
                    label = "Password"
                    maxlength = "20"
                    placeholder = "password"
                    readonly = "false"
                    rendered = "true"
                    required = "true"
                    requiredMessage = "Password Required !"
                    type="password" 
                    value = "#{signInBean.userSigningIn.password}" />
            </div>
            <div class = "genericTableRow">
                <p:commandButton 
                    action = "#{signInBean.signIn}" 
                    disabled = "false" 
                    id = "signInLink" 
                    validateClient = "true"
                    value = "Log In !" />
            </div>
            <p:growl 
                autoUpdate="true" 
                id ="indexGrowl" 
                showSummary="true" 
                showDetail="true" 
                sticky="false" 
                widgetVar="indexGrowl" />     
        </h:form>
        <h:form>
            <p:commandButton
                action = "signup.xhtml"
                disabled = "false" 
                id = "signUpLink" 
                rendered = "true"
                value = "Sign Up !" >
                <!--<p:ajax 
                    async="true"
                    disabled="false"
                    event="click"
                    immediate="true"
                    listener="{signupBean.initialize ()}"
                    oncomplete = "PF('indexSignupDialog').show()"
                    update = ":indexSignupDialog" />-->
            </p:commandButton>
        </h:form>
        <p:dialog id = "indexSignupDialog" widgetVar = "indexSignupDialog" >
            <ezcomp:UserAnagraphicView 
                userNameValidator="#{userNameSignUpValidator}" 
                userAnagraphicViewBean="#{signUpBean}" 
                usernameEditable = "true" 
                widgetVarName="indexSignupDialog"/>
        </p:dialog>
    </h:body>
</html>

